<template>
  <StackLayout class="root">
   <GridLayout class="top" height="140" columns="auto, *, auto" rows="40, *">
     <label class="label" row="0" colSpan="2" text="Estimated Total Value(BTC)" verticalAlignment="center"/>
     <label class="value1" row="1" col="0" :text="btcValuation" verticalAlignment="center"/>
     <label class="value2" row="1" col="1" :text="'≈' + usdValuation.toFixed(2) + 'USD'" verticalAlignment="center"/>
     <Button v-if="!isLogin" class="login func-btn" row="1" col="2" text="Login" horizontalAlignment="right" @tap="login"/>
   </GridLayout>
   <ScrollView orientation="vertical">
     <StackLayout>
       <coin-item v-for="(coin, index) in balances" :key="index" :coin="coin" />
     </StackLayout>
   </ScrollView>
  </StackLayout>
</template>
<script>
import CoinItem from '~/components/common/CoinItem'
import {dataBus} from '~/business/DataBus'
import Login from '~/components/login/Login'
import loaderGen, {loadingOption} from '~/utils/loading'

export default {
  components: {
    'coin-item': CoinItem
  },
  data() {
    return {
      coin: {
        symbol: 'UTC',
        available: 0.0123,
        onOrder: 0,
        price: 0.001,
      },
      btcValuation: 0.0,
      usdValuation: 0,
      isLogin: false,
      balances: [],
    }
  },
  mounted() {
    this.isLogin = !!localStorage.getItem('token')
    this.loader = loaderGen()
    if (this.isLogin) {
      const self = this
      setTimeout(function() {
        self.loadData()
      }, 500)
    }
  },
  methods:{
    login() {
      this.$navigateTo(Login);
      let self = this
      dataBus.loginBack = () => {
        self.isLogin = true
        self.loadData()
      }
    },
    loadData() {
      const that = this
      this.loader.show(loadingOption)
      dataBus.loadWalletDetail({
        onSuccess: ret => {
          that.balances = ret.balances
          that.btcValuation = ret.btcValuation
          that.usdValuation = ret.usdValuation
          that.loader.hide()
        },
        onError: (code, msg) => {
          alert(msg)
          that.loader.hide()
        }
      })
    }
  }
}
</script>
<style scoped>
.root {
  background: #15283F;
}
.label {
  color: #6292BE;
  font-size: 16;
  margin-left: 16;
  margin-top: 20;
}
.value1 {
  color: white;
  font-size: 40;
  margin-left: 14;
  font-family: 'DINAlternate';
}
.value2 {
  color: rgba(255, 255, 255, 0.5);
  font-size: 16;
  margin-top: 10;
}
.login {
  width: 120;
  height: 30;
  border-radius: 2;
  color: white;
  font-size: 14;
  margin-right: 12;
}
.top {
  background: #1C344F;
}
</style>


